ক্লাস (Class) এবং আইডি (ID) সিলেক্টরস কি?
ওয়েব ডেভেলপমেন্টে ক্লাস এবং আইডি সিলেক্টরস হল CSS সিলেক্টরস, যা HTML উপাদান বা এলিমেন্টের স্টাইল নিয়ন্ত্রণ করতে ব্যবহৃত হয়। CSS সিলেক্টরস ব্যবহার করে HTML উপাদানগুলোকে চিহ্নিত করা হয়, এবং সেই উপাদানের উপর নির্দিষ্ট স্টাইল প্রয়োগ করা হয়। ক্লাস এবং আইডি সিলেক্টরস দুটি সিলেক্টর হিসেবেই ব্যবহৃত হয়, তবে তাদের মধ্যে কিছু মূল পার্থক্য রয়েছে।
ক্লাস সিলেক্টর (Class Selector)
ক্লাস সিলেক্টর CSS-এ একটি বিশেষ শ্রেণী বা গ্রুপের উপাদানকে সিলেক্ট করতে ব্যবহৃত হয়। এক বা একাধিক HTML এলিমেন্টকে একই ক্লাস অ্যাসাইন করা যায়, যার মাধ্যমে তাদের একযোগভাবে স্টাইল করা সম্ভব। ক্লাস সিলেক্টর . (ডট) দিয়ে চিহ্নিত করা হয়।
ক্লাস সিলেক্টর উদাহরণ:
<!-- HTML -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
/* CSS */
.card {
background-color: lightblue;
padding: 10px;
border-radius: 5px;
}
এখানে:
.cardসিলেক্টরটি HTML ডকুমেন্টের সমস্তcardক্লাসের জন্য স্টাইল প্রয়োগ করবে।- একই ক্লাস একাধিক HTML উপাদানে ব্যবহৃত হতে পারে।
ক্লাস সিলেক্টরের বৈশিষ্ট্য:
- একাধিক উপাদানে ব্যবহারযোগ্য: একাধিক উপাদানে একই ক্লাস ব্যবহার করা যেতে পারে।
- স্টাইল পুনঃব্যবহারযোগ্য: একাধিক এলিমেন্টের মধ্যে একই স্টাইল প্রয়োগ করা যায়।
- গ্লোবাল এবং স্পেসিফিক: একটি নির্দিষ্ট ক্লাস অন্য যেকোনো উপাদানের সাথে সংযুক্ত হতে পারে এবং তা স্টাইল করতে সহায়তা করে।
আইডি সিলেক্টর (ID Selector)
আইডি সিলেক্টর CSS-এ একটি নির্দিষ্ট HTML উপাদানকে চিহ্নিত করতে ব্যবহৃত হয়। প্রতিটি HTML উপাদান শুধুমাত্র একটি আইডি অ্যাসাইন করতে পারে, যা সেই উপাদানটি এককভাবে চিহ্নিত করে। আইডি সিলেক্টর # (হ্যাশ) দিয়ে চিহ্নিত করা হয়।
আইডি সিলেক্টর উদাহরণ:
<!-- HTML -->
<div id="header">Header Section</div>
<p id="intro">Welcome to the webpage!</p>
/* CSS */
#header {
background-color: lightgreen;
padding: 15px;
font-size: 20px;
}
#intro {
font-style: italic;
color: gray;
}
এখানে:
#headerসিলেক্টরটিid="header"অ্যাসাইন করাdivউপাদানটিকে লক্ষ্য করে স্টাইল প্রয়োগ করবে।#introসিলেক্টরটিid="intro"অ্যাসাইন করাpউপাদানটির জন্য প্রযোজ্য।
আইডি সিলেক্টরের বৈশিষ্ট্য:
- একক ব্যবহার: HTML ডকুমেন্টে একটি আইডি একাধিক বার ব্যবহার করা উচিত নয়। একটি নির্দিষ্ট উপাদানকে এককভাবে চিহ্নিত করতে আইডি ব্যবহার করা হয়।
- বিশেষভাবে লক্ষ্য করা: আইডি সিলেক্টর HTML ডকুমেন্টে একটি বিশেষ উপাদানকে লক্ষ্য করে কাজ করে।
ক্লাস এবং আইডি সিলেক্টরের মধ্যে পার্থক্য
| বৈশিষ্ট্য | ক্লাস সিলেক্টর | আইডি সিলেক্টর |
|---|---|---|
| চিহ্নিতকরণ | . (ডট) দিয়ে চিহ্নিত করা হয় | # (হ্যাশ) দিয়ে চিহ্নিত করা হয় |
| ব্যবহার | একাধিক উপাদানে ব্যবহার করা যেতে পারে | একক উপাদানে ব্যবহৃত হয় |
| বিশেষত্ব | কম স্পেসিফিক | বেশি স্পেসিফিক |
| ইউনিকনেস | একাধিক এলিমেন্টে একই ক্লাস অ্যাসাইন করা যায় | একটি উপাদানে একটি আইডি অ্যাসাইন করা হয় |
| উদাহরণ | .button { color: red; } | #header { background: blue; } |
ক্লাস এবং আইডি সিলেক্টরস এর সাথে আরও কিছু CSS সিলেক্টর
ওয়েব ডেভেলপমেন্টে আরও বেশ কিছু CSS সিলেক্টর ব্যবহার করা হয়, যা ওয়েব পেজের এলিমেন্টগুলির আরও উন্নত স্টাইলিংয়ের জন্য সহায়ক:
- এলিমেন্ট সিলেক্টর: একটি নির্দিষ্ট HTML এলিমেন্টের জন্য স্টাইল প্রয়োগ করে, যেমন
div,p,h1ইত্যাদি। - এট্রিবিউট সিলেক্টর: একটি নির্দিষ্ট HTML অ্যাট্রিবিউটের মানের উপর ভিত্তি করে সিলেক্ট করা, যেমন
[type="text"],[href="#"]। - পসিডো ক্লাস সিলেক্টর: নির্দিষ্ট অবস্থায় বা ইন্টারঅ্যাকশনে থাকা উপাদান চিহ্নিত করতে ব্যবহৃত হয়, যেমন
:hover,:active,:focus।
সারাংশ
ক্লাস এবং আইডি সিলেক্টর CSS-এ সবচেয়ে মৌলিক এবং গুরুত্বপূর্ণ সিলেক্টর। ক্লাস সিলেক্টর বিভিন্ন উপাদানের জন্য স্টাইল প্রয়োগ করার জন্য ব্যবহৃত হয়, এবং আইডি সিলেক্টর একটি একক উপাদানের জন্য স্টাইল প্রয়োগে ব্যবহৃত হয়। ক্লাস সিলেক্টরগুলো অনেকগুলিতে পুনঃব্যবহারযোগ্য হলেও আইডি সিলেক্টর এককভাবে এক উপাদানকে নির্দেশ করে। ওয়েব ডেভেলপমেন্টে সঠিক সিলেক্টর ব্যবহার করে ওয়েব পেজের ডিজাইন ও কার্যকারিতা উন্নত করা সম্ভব।
Read more
